<template>
	<view>
		<view>
			<u-input v-model="name" input-align="right" placeholder="请输入功能名称" />
		</view>
		<view v-for="item in dataSource" class="between center hang">
			<view class="flex-1">
				<view>{{item.name}}</view>
				<view style="text-indent: 2em;color: blue;">{{item.code}}</view>
			</view>
			<view class="center font-size-20">
				<view @click="openAdd(item)">
					<u-icon class="color-green" name="plus-circle-fill"></u-icon>
				</view>
				<view @click="openEdit(item)">
					<u-icon class="color-green" name="edit-pen-fill"></u-icon>
				</view>
				<view @click.stop="openDialogDelete(item)">
					<u-icon name="trash-fill"></u-icon>
				</view>
			</view>
		</view>
		<u-popup :show="showEdit" @close="showEdit=false" :round="10" mode="bottom">
			<view>
				<menuAddressEditVue :menuItem="menuItem"></menuAddressEditVue>
			</view>
		</u-popup>
		<DialogVue :show="showDialog" :content="content" @confirm="confirm" @close="showDialog=false"></DialogVue>
	</view>
</template>

<script>
	import {
		menuAddressSelect,
		menuAddressStatus,
		menuAddressDelete
	} from '../../api/menuAddress';
	import DialogVue from '../../components/Dialog.vue';
	import menuAddressEditVue from './menuAddressEdit.vue';
	export default {
		components: {
			DialogVue,
			menuAddressEditVue
		},
		data() {
			return {
				dataSource: [],
				name: '',
				showDialog: false,
				content: '',
				showEdit: false,
				menuItem: {},
			}
		},
		created() {
			uni.$on('handleClose', this.handleClose)
		},
		watch: {
			name(val) {
				this.name = val;
				this.search();
			},
		},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				menuAddressSelect({
					name: this.name,
					status: 1
				}).then(res => {
					this.dataSource = res;
				})
			},
			search() {
				this.init()
			},
			openAdd(item) {
				this.menuItem = {
					parentId: item.parentId,
					parentName: item.parentName,
					addressId: item.addressId,
					status: 1
				};
				this.showEdit = true;
			},
			openEdit(item) {
				this.menuItem = {
					...item
				};
				this.showEdit = true;
			},
			openDialogStatus(item) {
				this.content = "是否要修改状态？"
				this.operateType = "status"
				this.menuItem = {
					...item
				};
				this.showDialog = true;
			},
			openDialogDelete(item) {
				this.menuItem = {
					...item
				};
				this.operateType = "delete"
				this.content = "是否确定要删除？"
				this.showDialog = true;
			},
			confirm() {
				this.showDialog = false;
				if (this.operateType == 'delete') {
					menuAddressDelete(this.menuItem).then(res => {
						this.init()
					})
				} else if (this.operateType == 'status') {
					menuAddressStatus(this.menuItem).then(res => {
						this.init()
					})
				}
			},
			handleClose() {
				this.showEdit = false;
				this.init()
			},

		}
	}
</script>

<style>
</style>